<template>
  <div class="house-wrap">
    <a-row type="flex" justify="center" class="house">
      <div
        v-for="({
          title,
          houseType,
          area,
          floor,
          price,
          houseOverview,
          location,
          owner
        },
        index) in houseList"
        :key="index"
        class="house-card"
        @click="handleClick(index)"
      >
        <a-row type="flex" justify="space-between" align="middle">
          <a-col>
            <a-row type="flex" :gutter="20">
              <a-col
                ><img
                  src="http://localhost:8090/images/house/image/1.webp"
                  width="250"
                  height="150"
                  class="img"
              /></a-col>
              <a-row type="flex" align="middle">
                <a-col>
                  <span class="title">{{ title }}</span>
                  <a-row type="flex" align="middle" class="feature">
                    <a-col>{{ houseType.desc }}</a-col>
                    <a-divider type="vertical" />
                    <a-col>{{ area }}平方米</a-col>
                    <a-divider type="vertical" />
                    <a-col>{{ floor }}层</a-col>
                    <a-divider type="vertical" />
                    <a-col>
                      <ChatBtn :owner="owner" />
                    </a-col>
                  </a-row>
                  <a-row class="location">
                    {{ location }}
                  </a-row>
                  <a-row>
                    <a-tag
                      color="blue"
                      v-for="(overview, k) in houseOverview"
                      :key="k"
                    >
                      {{ overview.desc }}
                    </a-tag>
                  </a-row>
                </a-col>
              </a-row>
            </a-row>
          </a-col>
          <a-col flex="100px">
            <a-row
              type="flex"
              justify="end"
              align="bottom"
              class="price-wrap"
              :gutter="5"
            >
              <a-col class="price">{{ price }}</a-col>
              <a-col class="unit">元/月</a-col>
            </a-row>
          </a-col>
        </a-row>
      </div>
    </a-row>
    <ChatPanel />
  </div>
</template>
<script>
import ChatBtn from "../components/chat/chat-btn.vue";
import ChatPanel from "../components/chat/chat-panel.vue";
export default {
  name: "house",
  layout: "MainLayout",
  components: {
    ChatBtn,
    ChatPanel
  },
  data() {
    return {
      houseList: [],
      houseType: []
    };
  },
  async asyncData({ $axios }) {
    let houseList = [];

    let res = await $axios.get("/house/getHouses");
    if (res.data.status == 0) {
      houseList = res.data.houses;
    }

    return {
      houseList
    };
  },
  async fetch({ $axios, store }) {
    const res = await $axios.get("/house/getMatching");
    if (res.data.status == 0) {
      await store.dispatch("house/setMatching", {
        val: res.data.matching
      });
    }
  },
  methods: {
    handleClick(i) {
      this.$router.push({
        path: "/house-detail",
        query: { house: JSON.stringify(this.houseList[i]) }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.house-wrap {
  width: 100%;
  height: calc(100vh - 64px - 48px);
  .house {
    .house-card {
      width: 70%;
      padding: 10px;
      border-bottom: 1px solid #cccccc;
      cursor: pointer;
      background: white;
      .title {
        font-size: 20px;
        font-weight: bold;
      }
      .img {
        object-fit: cover;
      }
      .feature {
        font-size: 15px;
        margin: 10px 0px;
        /deep/ .ant-divider {
          background-color: #000000;
        }
        /deep/ .ant-btn-link {
          padding: 0;
        }
      }
      .location {
        margin-bottom: 10px;
      }
      .price-wrap {
        .price {
          font-size: 25px;
          color: #eb5f00;
          font-weight: bold;
        }
        .unit {
          font-size: 15px;
          color: #eb5f00;
        }
      }
    }
  }
}
</style>
